
<template>
	<scroll-view class="tourist-list" scroll-y>
	  <view class="room-card">
		<image v-if="room.headImageUrl" :src="room.headImageUrl" @click="gotoRoomDetail(room,hotelname)" class="room-image"></image>
		<image v-else src="https://segmentfault.com/img/remote/1460000017917121/view?w=350&h=276" @click="gotoRoomDetail(room,hotelname)" class="room-image"></image>
		<view class="room-info">
		  <view class="room-name" @click="gotoRoomDetail(room,hotelname)">{{ room.name }}</view>
		  <view class="room-bedType room-detail" @click="gotoRoomDetail(room,hotelname)"><span v-for="(tag,index) in room.bedType.split(',')" :key="index">{{tag.split("-")[0]}}张{{ getbad(tag) }} &nbsp;·&nbsp; </span> {{ room.liveNumber }} 人入住 &nbsp;·&nbsp; {{ room.area }} m²</view>
		  <!-- <view class="room-detail">{{ room.liveNumber }} 人入住 · {{ room.area }} m²</view> -->
		  <view class="refundable" v-if="room.isBreakfast" @click="gotoRoomDetail(room,hotelname)">{{ room.isBreakfast }}份早餐</view>
	      <view class="refundable" v-else @click="gotoRoomDetail(room,hotelname)">无早餐</view>
		  <view class="refundable" @click="gotoRoomDetail(room,hotelname)">{{ room.checkOutPolicy }}</view>
		  <view class="limittag">
			  <view class="limit" v-for="(item,index) in room.houseTags" :key="index">{{ gethouse(item.code) }}<text style="font-size: 20rpx;line-height: 10rpx;margin: 0 10rpx 0 5rpx;" v-if="index != room.houseTags.length - 1"> | </text> </view>
		  </view>
		  
		  <view class="room-footer" @click="gotoOrder(room,hotelname)">
			<view class="hotel-price"><text style="font-size: 24rpx;">￥</text>{{room.mixPrice}}<text style="font-size: 24rpx;">起</text></view>
			<button class="book-btn">订</button>
		  </view>
		</view>
	  </view>
  </scroll-view>
</template>
<script setup lang="ts">  
	import { onMounted} from "vue";
	import {commonWordList} from "@/api/system";
	import {hotelPrice} from "@/hotelHomestay/api/hotelHomestay";
	import useHotelStore from '@/store/hotel'; 

	const hotelStore = useHotelStore();

	defineProps<{
	  room: {};
	  hotelname:''
	}>(); 

	const gotoRoomDetail =(room,hotelname)=>{  
	  const data = {
		  id:room.id,
		  checkInTime:hotelStore.beginDate,
		  checkOutTime:hotelStore.endDate
	  }
	  hotelPrice(data).then(res=>{
		  // console.log(34,res);
		  room.hotelname = hotelname 
		  room.livePrice = res.result
		  const yudingDataJson = JSON.stringify(room); 
		  const encodedYudingData = encodeURIComponent(yudingDataJson); 
		  uni.navigateTo({
			url:`/hotelHomestay/pages/roomDetail/index?roomData=${encodedYudingData}`
		  });
	  })
	  
	}
	const gotoOrder =(room,hotelname)=>{  
	  const data = {
		  id:room.id,
		  checkInTime:hotelStore.beginDate,
		  checkOutTime:hotelStore.endDate
	  }
	  hotelPrice(data).then(res=>{
		  // console.log(34,res);
		  room.hotelname = hotelname 
		  room.livePrice = res.result
		  const yudingDataJson = JSON.stringify(room); 
		  const encodedYudingData = encodeURIComponent(yudingDataJson); 
		  uni.navigateTo({
			url:`/hotelHomestay/pages/Order/index?roomData=${encodedYudingData}`
		  });
	  })
	  
	}
	const badData = ref([])
	const houseData = ref([])
	const queryCommonWordList = async () => {
		await commonWordList({keys:"HOTEL_HOUSE_BED_TYPE"}).then(res => { 
			badData.value = res.result.HOTEL_HOUSE_BED_TYPE
		});
		await commonWordList({keys:"HOTEL_HOUSE_TYPE_TAG"}).then(res => {  
			houseData.value = res.result.HOTEL_HOUSE_TYPE_TAG
		});
	}; 
	const getbad = (val)=>{
		// console.log(val);
		const num = val.split("-")[1];
		const name = badData.value.find(item => item.code == num)?.name || '';
		return name.split('米')[1];
	} 
	const gethouse = (val)=>{ 
		return houseData.value.find(item => item.code == val)?.name || '';
	}
	onMounted(() => {
	    queryCommonWordList()
	})
</script>


<style scoped>
.room-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  /* padding: 10px; */
  display: flex;
}

.room-image {
  width: 45%;
  height:417rpx;
  object-fit: cover;
  border-radius: 8px;
}

.room-info {
  flex: 1;
  padding: 30rpx 10rpx 30rpx 30rpx;
}
.room-name{
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 29rpx;
	color: #2B2B24;
}
.room-bedType{
	display: flex;
	flex-wrap: wrap;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #2B2B24;
	margin: 5rpx 0 0 0 ; 
}
.room-detail{
	width: 100%;
	margin: 10rpx 0;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #2B2B24;
}
.refundable{
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #1B9C61;
}
.limittag{
	display: flex;
}
.limit{
	margin: 20rpx 0;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #2B2B24;
}
.room-footer {
	z-index: 99999999;
	padding:30rpx 0 0 0;
	height: 76rpx;
	/* width: 100%; */
	position: absolute;
	bottom: 40rpx;
	right: 40rpx;
	display: flex;
	justify-content: space-between;
}
.hotel-price{
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 38rpx;
	color: #AA5413;
	line-height: 76rpx;
	margin: 10rpx 20rpx 0 0;
}
.book-btn{
	line-height: 76rpx;
	background-color: #1B9C61;
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 36rpx;
	color: #EEF0DF;
}
</style>
